✨ PR Description

1. Problem & Context

Comprehensive RTL support requires replacing physical CSS properties (left/right/top/bottom, margin-left/right, padding-left/right) with logical equivalents (start/end, block/inline). This enables automatic mirroring for RTL locales without conditional styling or layout shifts.

2. What Changed (Where)

Core files: Replaced directional properties across ~100+ JS/CSS files. Key pattern: marginRight → marginInlineEnd, borderTop → borderBlockStart, left: 0 → inset: 0, padding-bottom → padding-block-end.

Infrastructure: Added @mui/system dependency for RtlProvider wrapper in pie-chart. Added Rotate component for icon rotation instead of inline sx={{ rotate }}.

Logic: Extracted RTL detection (usePluginSettingsContext().isRTL) and passed horizontalOrigin/TooltipPlacement dynamically to positioning components (popover, tooltips, sidebar).

Banners: Split compound conditions (!isOpen || viewedBanner → separate checks) and removed redundant RTL selectors (html[dir="rtl"]).

3. How It Works

RTL flows through context provider → components read isRTL flag → compute logical direction props (TooltipPlacement = isRTL ? 'left' : 'right') → passed to MUI components respecting dir="rtl" on root. CSS logical properties auto-flip without JS intervention. No layout recalc needed.

4. Risks

Minor: Icon rotation via Rotate component adds overhead vs inline transform (negligible). Testing gap: RTL rendering untested in preview; recommend verifying pie-chart centering and tooltip placement. Incomplete: PHP margin shorthand (margin-block: 80px) not back-compatible with older browsers—use explicit properties if IE11 support required (unlikely given MUI v7).

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Description using Guidelines Learn how}